package com.chatty.compose.ui.components

import androidx.compose.animation.Crossfade
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.Card
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ChainStyle
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.Dimension

//Text添加border
@Composable
fun Tw() {
    Text(
        modifier = Modifier
            .border(1.dp, color = Color.Red, shape = RoundedCornerShape(10.dp))  // 先添加边框
            .padding(10.dp),  // 再添加内边距
        text = "Hello World"
    )
}

@Composable
fun Tw2() {
    Text(
        modifier = Modifier
            .background(
                color = Color.Red,
                shape = RoundedCornerShape(10.dp)
            )  // 先添加边框
            .padding(10.dp),  // 再添加内边距
        text = "Hello World"
    )
}

@Composable
fun Tw3() {

    Column {
        Card(
            modifier = Modifier.wrapContentWidth(),
            backgroundColor = Color.Red,
            shape = RoundedCornerShape(10.dp)
        ) {
            Box(
                modifier = Modifier
                    .width(120.dp)
                    .padding(10.dp)
            ) {
                Text(
                    modifier = Modifier
                        .padding(10.dp),  // 再添加内边距
                    text = "Hello World"
                )
            }
        }
        Box(
            modifier = Modifier
                .width(120.dp)
                .padding(10.dp)
                .background(Color.Blue, RoundedCornerShape(10.dp))
        ) {
            Text(
                modifier = Modifier
                    .padding(10.dp),  // 再添加内边距
                text = "Hello World"
            )
        }
        Box(
            modifier = Modifier
                .width(120.dp)
                .background(Color.Red, RoundedCornerShape(10.dp))
                .padding(10.dp)
        ) {
            Text(
                modifier = Modifier
                    .padding(10.dp),  // 再添加内边距
                text = "Hello World"
            )
        }
    }

    //surface嵌套Text
    Surface(
        modifier = Modifier
            .width(120.dp)
            .padding(10.dp)
            .background(Color.Yellow, RoundedCornerShape(10.dp))
            .wrapContentSize()
            .padding(10.dp)
    ) {
        Text(
            modifier = Modifier
                .padding(10.dp),  // 再添加内边距
            text = "Hello World22"
        )
    }

//
//    padding 设置顺序	点击事件响应范围
//    padding 在 clickable 之前	只有内容区域响应点击事件，padding 区域不响应。
//    padding 在 clickable 之后	内容和 padding 区域都会响应点击事件。
}


@Preview
@Composable
fun TwPreview() {
   Tw6()
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun Tw4() {
    Column {
        Surface(
            color = Color.Red,
            elevation = 4.dp,
            shape = RoundedCornerShape(8.dp),
            modifier = Modifier
                .fillMaxWidth()
                .clickable { println("Surface clicked!") }
        ) {
            Text(
                text = "Hello Surface",
                modifier = Modifier
                    .wrapContentSize()
                    .background(Color.Blue)
                    .padding(10.dp)
            )
        }

        Spacer(modifier = Modifier.height(10.dp))

       Box(modifier = Modifier
           .width(200.dp)
           .height(100.dp)
           .background(Color.Red, RoundedCornerShape(8.dp))
           .padding(10.dp), contentAlignment = Alignment.BottomEnd,

        ) {
            Text(text = "Hello Card",
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .wrapContentSize()
                    .background(Color.Blue),

            )
        }

    }

}

@Composable
fun Tw5() {
//    Box(Modifier
//        .width(300.dp)
//        .fillMaxHeight().background(Color.Red)) {
//
//    }
    //surface card padding不生效

}
@Composable
fun Tw6() {

VerticalGuidelineExample()
}

@Composable
fun ConstraintLayoutExample() {
    ConstraintLayout(
        modifier = Modifier
            .wrapContentSize()
            .width(200.dp)
            .padding(top = 16.dp, start = 16.dp, bottom = 16.dp)
    ) {
        // 创建引用（Refs）用于约束组件
        val (text1, text2, text3) = createRefs()

        // Text 1
        Text(
            text = "Text 1",
            modifier = Modifier
                .constrainAs(text1) {
                    top.linkTo(parent.top) // 顶部对齐到父容器顶部
                    start.linkTo(parent.start) // 左侧对齐到父容器左侧
                }
                .background(Color.LightGray)
                .padding(8.dp)
        )

        // Text 2
        Text(
            text = "Text 2",
            modifier = Modifier
                .constrainAs(text2) {
                    top.linkTo(text1.bottom, margin = 16.dp) // 顶部对齐到 Text 1 的底部
                    start.linkTo(parent.start) // 左侧对齐到父容器左侧
                }
                .background(Color.LightGray)
                .padding(8.dp)
        )

        // Text 3
        Text(
            text = "Text 3",
            textAlign = TextAlign.Center, // 设置文案居中
            modifier = Modifier
                .constrainAs(text3) {
                    top.linkTo(parent.top) // 顶部对齐到父容器顶部
                    start.linkTo(parent.start) // 左侧对齐到父容器左侧
                    end.linkTo(parent.end) // 右侧对齐到父容器右侧
                    bottom.linkTo(parent.bottom) // 底部对齐到父容器底部
                    width = Dimension.fillToConstraints // 宽度占满父容器
                    height = Dimension.value(40.dp) // 固定高度
                }
                .background(Color.LightGray)
                .padding(8.dp) // 添加内边距
        )
    }
}
@Composable
fun VerticalChainExample() {
    ConstraintLayout(
        modifier = Modifier
            .height(200.dp)
            .background(Color.Red)
            .padding(16.dp)
    ) {
        // 创建引用（Refs）用于约束组件
        val (text1, text2, text3) = createRefs()

        // Text 1
        Text(
            text = "Text 1",
            modifier = Modifier
                .constrainAs(text1) {
                    start.linkTo(parent.start)
                }
                .background(Color.LightGray)
                .padding(8.dp)
        )

        // Text 2
        Text(
            text = "Text 2",
            modifier = Modifier
                .constrainAs(text2) {
                    start.linkTo(parent.start)
                }
                .background(Color.LightGray)
                .padding(8.dp)
        )

        // Text 3
        Text(
            text = "Text 3",
            modifier = Modifier
                .constrainAs(text3) {
                    start.linkTo(parent.start)
                }
                .background(Color.LightGray)
                .padding(8.dp)
        )

        // 创建垂直 Chain
        createVerticalChain(text1, text2, text3, chainStyle = ChainStyle.Spread) // 紧凑排列
    }
}
@Composable
fun BarrierExample() {
    ConstraintLayout(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        // 创建引用（Refs）用于约束组件
        val (text1, text2, text3) = createRefs()

        // 创建 Barrier
        val barrier = createEndBarrier(text1, text2) // 根据 text1 和 text2 的结束边创建 Barrier

        // Text 1
        Text(
            text = "Short Text",
            modifier = Modifier
                .constrainAs(text1) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                }
                .background(Color.LightGray)
                .padding(8.dp)
        )

        // Text 2
        Text(
            text = "This is a longer text",
            modifier = Modifier
                .constrainAs(text2) {
                    top.linkTo(text1.bottom, margin = 16.dp)
                    start.linkTo(parent.start)
                }
                .background(Color.LightGray)
                .padding(8.dp)
        )

        // Text 3
        Text(
            text = "Text 3",
            modifier = Modifier
                .constrainAs(text3) {
                    top.linkTo(parent.top)
                    start.linkTo(barrier, margin = 16.dp) // 对齐到 Barrier 的右侧
                }
                .background(Color.LightGray)
                .padding(8.dp)
        )
    }
}

@Composable
fun VerticalGuidelineExample() {
    ConstraintLayout(
        modifier = Modifier
            .width(200.dp)
            .height(100.dp)

            .background(Color.Red)
    ) {
        // 创建引用（Refs）用于约束组件
        val (text1, text2) = createRefs()

        // 创建垂直 Guideline（30% 位置）
        val guidelineStart = createGuidelineFromStart(0.5f)
        val createGuidelineFromTop = createGuidelineFromTop(0.5f)

        // 创建垂直 Guideline（70% 位置）
        val guidelineEnd = createGuidelineFromStart(0.7f)

        // Text 1
        Text(
            text = "Text 1",
            modifier = Modifier
                .constrainAs(text1) {
                    top.linkTo(parent.top)
                    start.linkTo(guidelineStart) // 对齐到 30% 位置的 Guideline
                }
                .background(Color.LightGray)
                .padding(8.dp)
        )

        // Text 2
        Text(
            text = "Text 2",
            modifier = Modifier
                .constrainAs(text2) {
                    top.linkTo(createGuidelineFromTop)
                    start.linkTo(guidelineEnd) // 对齐到 70% 位置的 Guideline
                }
                .background(Color.LightGray)
                .padding(8.dp)
        )
    }
}
